<template>
  <div class="app-container">
    <div class="form-container">
      <el-form label-width="120" :model="form" ref="refForm" :rules="rules">
        <el-form-item label="卡券类型" prop="couponType">
          <el-select v-model="form.couponType" placeholder="卡券类型">
            <el-option label="配送券" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卡券名称" prop="couponName">
          <el-input placeholder="卡券名称" v-model="form.couponName"></el-input>
        </el-form-item>
        <el-form-item label="卡券原价" prop="couponPrice">
          <el-input placeholder="卡券原价" v-model="form.couponPrice"></el-input>
        </el-form-item>
        <el-form-item label="卡券折扣价" prop="couponDiscount">
          <el-input placeholder="卡券折扣价" v-model="form.couponDiscount"></el-input>
        </el-form-item>
        <el-form-item label="使用次数" prop="useTimes">
          <el-input placeholder="使用次数" v-model="form.useTimes"></el-input>
        </el-form-item>
        <el-form-item label="有效期(天)" prop="expire">
          <el-input placeholder="有效期(天)" v-model="form.expire"></el-input>
        </el-form-item>
        <el-form-item label="规则说明" prop="ruleDescribe">
          <el-input type="textarea" placeholder="规则说明" v-model="form.ruleDescribe"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-container">
      <el-button type="primary" size="default">取消</el-button>
      <el-button type="primary" size="default" @click="handleSubmit(refForm as FormInstance)">{{
        form.couponId ? "修改" : "添加"
      }}</el-button>
    </div>
  </div>
</template>
<script lang="tsx" setup name="CarTypeForm">
import { Coupon } from "@/api/interface/city/cityMarket/coupon";
import { addCouponAPI, getCouponDetailAPI, updateCouponAPI } from "@/api/modules/city/cityMarket/coupon/api";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const refForm = ref<FormInstance>();
const rules = ref<FormRules>({
  couponType: [{ required: true, message: "请选择卡券类型", trigger: "blur" }],
  couponName: [{ required: true, message: "请输入卡券名称", trigger: "blur" }],
  couponPrice: [{ required: true, message: "请输入卡券原价", trigger: "blur" }],
  couponDiscount: [{ required: true, message: "请输入卡券折扣价", trigger: "blur" }],
  useTimes: [{ required: true, message: "请输入使用次数", trigger: "blur" }],
  expire: [{ required: true, message: "请输入有效期(天)", trigger: "blur" }]
});
let form = ref<Coupon.EditParams>({
  province: JSON.parse(localStorage.getItem("userInfo") as string).province,
  city: JSON.parse(localStorage.getItem("userInfo") as string).city
});
const handleSubmit = (formEl: FormInstance) => {
  formEl.validate(valid => {
    if (valid) {
      form.value.couponId ? update() : add();
    } else {
      ElMessage.error("请填写正确的信息");
    }
  });
};
const add = async (): Promise<void> => {
  const { code, msg } = await addCouponAPI(form.value);
  if (code == "200") {
    ElMessage.success("添加成功");
    router.push({ path: "/cityLevel/cityMarket/coupons/index" });
  } else {
    ElMessage.error(msg);
  }
};
const update = async (): Promise<void> => {
  const { code, msg } = await updateCouponAPI(form.value);
  if (code == "200") {
    ElMessage.success("修改成功");
    router.push({ path: "/cityLevel/cityMarket/coupons/index" });
  } else {
    ElMessage.error(msg);
  }
};
// 获取详情
const getDetail = async (): Promise<void> => {
  const { code, data, msg } = await getCouponDetailAPI(String(route.query.id));
  if (code == "200") {
    if (data) {
      form.value = data;
    }
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  if (route.query.id != undefined) {
    getDetail();
  }
});
</script>
<style lang="scss" scoped>
.app-container {
  padding: 10px;
  background-color: white;
  .form-container {
    box-sizing: border-box;
    width: 60%;
    padding: 10px;
    margin: 0 auto;
    .form-title {
      margin-bottom: 15px;
      margin-left: 25px;
      .title-number {
        display: inline-block;
        width: 25px;
        height: 25px;
        font-size: 13px;
        line-height: 25px;
        color: white;
        text-align: center;
        vertical-align: middle;
        background-color: #009688;
        border-radius: 50%;
      }
    }
    .sms-code {
      //   float: right;
      position: absolute;
      right: 5px;
      display: inline-block;
    }
  }
  .btn-container {
    margin-top: 20px;
    text-align: center;
  }
}
::v-deep .el-col {
  padding-right: 10px;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
</style>
